<template>
  <div class="list">
    <div v-if="articleList.length!==0" class="">
      <transition-group name="slideleft" tag="div">
        <list-box v-for="(item, index) in articleList" :article="item" :key="index" @click.native="toDetail(item, index)">
        </list-box>
      </transition-group>
    </div>
    <div class="nodata" v-if="articleList.length===0">
      <no-data msg="暂无文章"></no-data>
    </div>
  </div>
</template>

<script>
import listBox from 'base/articleList/item.vue'
import noData from 'base/NoData'
export default {
  name: 'list',
  data() {
    return {
      title: '文章'
    }
  },
  props: {
    articleList: {
      type: Array,
      default: []
    },
    articleTotal: {
      type: Number,
      default: 0
    },
    pageindex: {
      type: Number,
      default: 1
    },
    type: {
      type: String,
      default: 'load'
    }
  },
  components: {
    listBox,
    noData
  },
  methods: {
    toDetail(article, index) {
      // this.$store.dispatch('GetThisArticle', article._id)
      this.$router.push(`/article/${article._id}`)
      if ((this.type === 'load') && (this.articleTotal > this.articleList.length) && (this.articleList.length - 1 === index)) {
        this.$store.dispatch('GetArticleList', { pageindex: this.pageindex + 1 })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~common/styles/mixin.scss';
.list {
  // position: relative;
  .slideleft-enter-active .slideleft-leave-active {
    transition: all 1s cubic-bezier(0, 1.2, 1, 0.5);
    opacity: 0.8;
    transform: translate3d(2%, 0, 0);
  }
  .slideleft-enter, .slideleft-leave-to {
    opacity: 0.2;
    transform: translate3d(2%, 0, 0);
  }
  .list-box {
    display: flex;
    flex-direction: row;
    height: 134px;
    align-items: center;
    margin-bottom: 12px;
    background-color: rgba(255,255,255,0.4);
    .list-thumb {
      width: 170px;
      height: 120px;
      margin-left: 8px;
      overflow: hidden;
      background-position: center;
      background-size: cover;
    }
    .list-body {
      flex: 1;
      // max-width: 600px;
      width: 100%;
      margin: 0 12px;
      .list-title {
        margin: 0;
        max-width: 300px;
        width: 60%;
        margin-left: 2rem;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .list-description {
        height: 60px;
        line-height: 20px;
        overflow: hidden;
        margin: 5px 0;
        font-size: 14px;
        @include clamp(3);
      }
      .list-meta {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        display: flex;
        justify-content: flex-start;
        > .date,
          > .views,
          > .comments,
          > .likes {
            margin-right: 10px;
          }
      }
    }
  }
}
</style>
